<template>
  <div class="business-condition">
    <div class="situation-analysis">
      <div class="situation-name">
        <div class="text-til">营业情况分析</div>
        <div class="ckground-bar"></div>
      </div>
      <div class="total-sales">
        <div class="amount-block">
          <div class="title-block">
            <div class="title-ratio">
              <div>收款总额</div>
              <div class="sales-unit">(万元)</div>
            </div>
            <div class="sales-amount">
              <div>{{ discusses.xsze }}</div>
              <div v-show="discusses.xszeTb" class="sales-ratio">
                <svgBoot v-if="Number(discusses.xszeTb) > 0" /><svgTop v-else />
              </div>

              <div
                v-show="discusses.xszeTb"
                :class="[
                  Number(discusses.xszeTb) > 0 ? 'ratio-num' : 'ratio-red',
                ]"
              >
                {{ discusses.xszeTb }}%
              </div>
            </div>
          </div>
          <div class="title-block">
            <div class="title-ratio">
              <div>营收总额</div>
              <div class="sales-unit">(万元)</div>
            </div>
            <div class="sales-amount">
              <div>{{ discusses.ysze }}</div>
              <div class="sales-ratio" v-show="discusses.yszeTb">
                <svgBoot v-if="Number(discusses.yszeTb) > 0" /><svgTop v-else />
              </div>
              <div
                v-show="discusses.yszeTb"
                :class="[
                  Number(discusses.yszeTb) > 0 ? 'ratio-num' : 'ratio-red',
                ]"
              >
                {{ discusses.yszeTb }}%
              </div>
            </div>
          </div>
          <div class="title-block">
            <div class="title-ratio">
              <div>营业收现率</div>
              <div class="sales-unit">(%)</div>
            </div>
            <div class="sales-amount">
              <div>{{ discusses.yysxl }}</div>
              <div class="sales-ratio" v-show="discusses.yysxlTb">
                <svgBoot v-if="Number(discusses.yysxlTb) > 0" /><svgTop
                  v-else
                />
              </div>
              <div
                v-show="discusses.yysxlTb"
                :class="[
                  Number(discusses.yysxlTb) > 0 ? 'ratio-num' : 'ratio-red',
                ]"
              >
                {{ discusses.yysxlTb }}%
              </div>
            </div>
          </div>
        </div>
        <div class="rechargea-card">
          <div ref="mapChart" id="mapChart"></div>
          <div class="chart-marking">
            <div
              class="cash-column"
              @click="businessAnalysis('收款总额', '一码通')"
            >
              <div class="marking-title">
                <div class="cash-icon"><div class="cash-icon-color"></div></div>
                <div>一码通</div>
              </div>
              <div class="reserve-in">
                <div>{{ discusses.xszeYmt }}</div>
                <div class="hard-cash">万元</div>
              </div>
              <div class="characters">
                {{
                  discusses.xszeYmt != 0
                    ? (
                        (discusses.xszeYmt /
                          (discusses.xszeYmt +
                            discusses.xszeCzk +
                            discusses.xszeYsk)) *
                        100
                      ).toFixed(2)
                    : 0
                }}%
              </div>
            </div>
            <div
              class="cash-column"
              @click="businessAnalysis('收款总额', '充值卡')"
            >
              <div class="marking-title">
                <div class="rechargeable-icon">
                  <div class="rechargeable-icon-color"></div>
                </div>
                <div>充值卡</div>
              </div>
              <div class="reserve-in">
                <div>{{ discusses.xszeCzk }}</div>
                <div class="hard-cash">万元</div>
              </div>
              <div class="characte-rec">
                {{
                  discusses.xszeCzk != 0
                    ? (
                        (discusses.xszeCzk /
                          (discusses.xszeYmt +
                            discusses.xszeCzk +
                            discusses.xszeYsk)) *
                        100
                      ).toFixed(2)
                    : 0
                }}%
              </div>
            </div>
            <div
              class="cash-column"
              @click="businessAnalysis('收款总额', '应收款')"
            >
              <div class="marking-title">
                <div class="eceivables-icon">
                  <div class="eceivables-icon-color"></div>
                </div>
                <div>应收款</div>
              </div>
              <div class="reserve-in">
                <div>{{ discusses.xszeYsk }}</div>
                <div class="hard-cash">万元</div>
              </div>
              <div class="characte-reve">
                {{
                  discusses.xszeYsk != 0
                    ? (
                        (discusses.xszeYsk /
                          (discusses.xszeYmt +
                            discusses.xszeCzk +
                            discusses.xszeYsk)) *
                        100
                      ).toFixed(2)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
        <div class="rechargea-card">
          <div id="mapChart" ref="revenueChart"></div>
          <div class="chart-marking">
            <div
              class="cash-column"
              @click="businessAnalysis('营收总额', '一码通')"
            >
              <div class="marking-title">
                <div class="code-back"></div>
                <div>一码通</div>
              </div>
              <div class="reserve-in">
                <div>{{ discusses.yszeYmt }}</div>
                <div class="hard-cash">万元</div>
              </div>
              <div class="characters">
                {{
                  discusses.yszeYmt != 0
                    ? (
                        (discusses.yszeYmt /
                          (discusses.yszeYmt +
                            discusses.yszeCzk +
                            discusses.yszeYsk)) *
                        100
                      ).toFixed(2)
                    : 0
                }}%
              </div>
            </div>
            <div
              class="cash-column"
              @click="businessAnalysis('营收总额', '充值卡')"
            >
              <div class="marking-title">
                <div class="rechargeable-back"></div>
                <div>充值卡</div>
              </div>
              <div class="reserve-in">
                <div>{{ discusses.yszeCzk }}</div>
                <div class="hard-cash">万元</div>
              </div>
              <div class="characte-rec">
                {{
                  discusses.yszeCzk != 0
                    ? (
                        (discusses.yszeCzk /
                          (discusses.yszeYmt +
                            discusses.yszeCzk +
                            discusses.yszeYsk)) *
                        100
                      ).toFixed(2)
                    : 0
                }}%
              </div>
            </div>
            <div
              class="cash-column"
              @click="businessAnalysis('营收总额', '应收款')"
            >
              <div class="marking-title">
                <div class="eceivables-back"></div>
                <div>应收款</div>
              </div>
              <div class="reserve-in">
                <div>{{ discusses.yszeYsk }}</div>
                <div class="hard-cash">万元</div>
              </div>
              <div class="characte-reve">
                {{
                  discusses.yszeYsk != 0
                    ? (
                        (discusses.yszeYsk /
                          (discusses.yszeYmt +
                            discusses.yszeCzk +
                            discusses.yszeYsk)) *
                        100
                      ).toFixed(2)
                    : 0
                }}%
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="funding-plan">
      <div class="situation-name">
        <div class="text-til">一码通分析</div>
        <div class="ckground-bar"></div>
      </div>
      <div class="code-content">
        <div class="inflow-situation">
          <span class="item-quantity unit-flow">单位</span
          ><span class="item-quantity">项目数量</span
          ><span class="item-quantity">交易笔数</span
          ><span class="item-quantity">交易金额</span
          ><span class="item-quantity">手续费</span
          ><span class="item-quantity">入账金额</span>
        </div>
        <div
          class="inflow-situation"
          v-for="(item, index) in situation"
          :key="index"
          @click="openAnalysis(item)"
        >
          <span class="unit-flow light-yellow">{{ item.dw }}</span>
          <div class="inflow">
            <span>{{ item.xmsl }}</span
            ><span>{{ item.jybs }}</span
            ><span>{{ item.jyje }}</span
            ><span>{{ item.sxf }}</span
            ><span>{{ item.rzje }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Agriculture
    :title="title"
    :text="text"
    @close-area="cashVisible = false"
    v-if="cashVisible"
  />
  <Analysis
    v-if="AnalysisOFF"
    :analysObj="analysObj"
    @close-area="AnalysisOFF = false"
  />
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import Agriculture from "./agriculture.vue";
import Analysis from "./analysis.vue";
import svgTop from "./svgTop.vue";
import svgBoot from "./svgBoot.vue";
import { postRequest } from "../utils/request";
let cashVisible = ref(false);
let AnalysisOFF = ref(false);
let analysObj = ref({});
let text = ref("");
let title = ref("");
let mapChart = ref(null); //销售额
let revenueChart = ref(null); //营销额
let situation = ref([]); //一码通资金流入情况
let discusses = ref({
  xsze: 0,
  xszeYmt: 0,
  ysze: 0,
  xszeCzk: 0,
  xszeYsk: 0,
  yysxl: 0,
  yszeYmt: 0,
  yszeYmt: 0,
  yysxlYmt: 0,
  yszeCzk: 0,
  yszeYsk: 0,
  xszeTb: 0,
  yszeTb: 0,
  yysxlTb: 0,
}); //营业情况分析
const props = defineProps({
  textName: {
    type: String,
    default: "月",
  },
});
watch(
  () => props.textName,
  (newValue, oldValue) => {
    capitalInflowSituation(newValue); //一码通资金流入情况
    businessCondition(newValue); //营业情况分析
  }
);
let oneCodePass = (DomEch, text, obj) => {
  var data = [
    {
      name: "一码通",
      value: obj.codePass,
      ratio:
        Number(obj.codePass) > 0
          ? (
              (obj.codePass /
                (obj.codePass + obj.rechargeable + obj.receivables)) *
              100
            ).toFixed(2) + "%"
          : "0%",
      category: text,
    },
    {
      name: "充值卡",
      value: obj.rechargeable,
      ratio:
        Number(obj.rechargeable) > 0
          ? (
              (obj.rechargeable /
                (obj.codePass + obj.rechargeable + obj.receivables)) *
              100
            ).toFixed(2) + "%"
          : "0%",
      category: text,
    },
    {
      name: "应收款",
      value: obj.receivables,
      ratio:
        Number(obj.receivables) > 0
          ? (
              (obj.receivables /
                (obj.codePass + obj.rechargeable + obj.receivables)) *
              100
            ).toFixed(2) + "%"
          : "0%",
      category: text,
    },
  ];

  let option = {
    color: ["#12FCF6", "#FF9600", "#22F225"],
    title: {
      text: obj.total,
      subtext: text,
      textStyle: {
        color: "#FFFFFF",
        fontSize: 18,
      },
      subtextStyle: {
        fontSize: 18,
        color: "#FFFFFF",
      },
      x: "center",
      y: "35%",
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        return `<div>${params.name} :</div><div class='tooltname'>${params.value}万元</div><div class='tooltname'>${params.data.ratio}</div>`;
      },
      backgroundColor: "#0d62eca9",
      textStyle: {
        color: "#fff", // 设置字体颜色为黄色
        fontSize: 12,
      },
      borderWidth: 0, // 设置边框宽度为 2px
    },
    series: [
      // 主要展示层的
      {
        radius: ["70%", "84%"],
        center: ["50%", "50%"],
        type: "pie",
        data: data,
        label: {
          show: false, // 不显示标签内容
        },
        labelLine: {
          show: false, // 不显示引导线
        },
        itemStyle: {
          borderRadius: 20,
        },
      },
      {
        radius: ["0%", "66%"],
        center: ["50%", "50%"],
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        type: "pie",
        data: [
          {
            value: 1,
            itemStyle: {
              color: "#244D84", // 设置背景颜色
            },
          },
        ],
        label: {
          show: false, // 不显示标签内容
        },
        labelLine: {
          show: false, // 不显示引导线
        },
        tooltip: {
          show: false,
        },
      },
      {
        // 边框的设置
        radius: ["98%", "98%"],
        center: ["50%", "50%"],
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        type: "pie",
      },
      {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["50%", "50%"],
        radius: ["88%", "88%"],
        label: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 0,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#4188AE",
            },
          },
        ],
      },
      {
        name: "刻度盘",
        type: "gauge",
        min: 0,
        max: 100,
        radius: "118%", //图表尺寸
        center: ["50%", "50%"],
        startAngle: 0,
        endAngle: 360,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#4C5F80",
            width: 3,
          },
          length: 8,
          splitNumber: 10,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
    ],
  };
  const chart = echarts.init(DomEch.value);
  chart.setOption(option);
  chart.on("click", function (params) {
    if (!params.name) return;
    businessAnalysis(params.data.category, params.name);
  });
};
let businessAnalysis = (val, name) => {
  title.value = val;
  text.value = name;
  cashVisible.value = true;
};
let capitalInflowSituation = (timerDa) => {
  //一码通资金流入情况
  postRequest("/screen/query/getCwYmtzjlrqk", timerDa)
    .then(({ code, data }) => {
      if (code == 200 && data.length > 0) {
        situation.value = data;
      } else {
        situation.value = [
          "华中区域中心",
          "华北区域中心",
          "华南区域中心",
          "华东区域中心",
          "西北区域中心",
          "西南区域中心",
        ].map((item) => {
          return {
            dw: item,
            xmsl: 0,
            jybs: 0,
            jyje: 0,
            sxf: 0,
            rzje: 0,
          };
        });
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
let businessCondition = (timerDa) => {
  //营业情况分析
  postRequest("/screen/query/getCwYyqkfx", timerDa)
    .then(({ code, data }) => {
      if (code == 200 && data != null) {
        discusses.value = data;
        initBusinessCondition();
      } else {
        for (const key in discusses.value) {
          discusses.value[key] = 0;
        }
        initBusinessCondition();
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
let initBusinessCondition = () => {
  oneCodePass(mapChart, "收款总额", {
    total: discusses.value.xsze,
    codePass: discusses.value.xszeYmt,
    rechargeable: discusses.value.xszeCzk,
    receivables: discusses.value.xszeYsk,
  }); //销售总额
  oneCodePass(revenueChart, "营收总额", {
    total: discusses.value.ysze,
    codePass: discusses.value.yszeYmt,
    rechargeable: discusses.value.yszeCzk,
    receivables: discusses.value.yszeYsk,
  }); //销售总额
};
let openAnalysis = (val) => {
  //一码通分析
  analysObj.value = val;
  AnalysisOFF.value = true;
};
onMounted(() => {
  capitalInflowSituation(props.textName); //一码通资金流入情况
  businessCondition(props.textName); //营业情况分析
});
</script>
<style lang="less" scoped>
.business-condition {
  width: 30vw;
  height: 90vh;
  margin-left: 0.3vw;
  font-family: Dream Han Sans CN;
  background: #ffffff00;
  .situation-analysis {
    height: 53vh;
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.3vh;
    .total-sales {
      width: 100%;
      height: 100%;
      background: #2098cc33;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 0.2vh 0.5vw;
      margin-top: 0.7vh;
      .amount-block {
        width: 100%;
        height: 8vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-block {
          width: 9.2vw;
          height: 8vh;
          background: #2098cc25;
          border: 1px solid #588ec35d;
          color: #fff;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .title-ratio {
            width: 100%;
            height: 3vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1vw;
            font-weight: 600;
            margin-top: 0.6vh;
          }
          .sales-amount {
            width: 100%;
            height: 3vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1vw;
            font-weight: 600;
            .sales-ratio {
              margin-left: 0.3vw;
            }
            .sales-unit {
              margin-left: 0.6vw;
              font-size: 0.6vw;
              font-weight: 500;
              transform: translateY(0.3vh);
            }
            .ratio-num {
              color: #8aecad;
              font-size: 0.6vw;
              font-weight: 500;
              transform: translateY(0.3vh);
            }
            .ratio-red {
              color: #ff4302;
              font-size: 0.6vw;
              font-weight: 500;
              transform: translateY(0.3vh);
            }
          }
        }
      }
      .rechargea-card {
        width: 100%;
        height: 19vh;
        border-radius: 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        #mapChart {
          width: 13vw;
          height: 18vh;
          :deep .tooltname {
            margin-left: 16px;
            margin-top: 0.3vh;
          }
        }
        .chart-marking {
          width: 15vw;
          height: 13vh;
          background: url("../assets/marking.png") no-repeat;
          background-size: 100% 100%;
          background-position: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          .cash-column {
            width: 14vw;
            height: 4vh;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-family: Dream Han Sans CN;
            font-weight: 500;
            font-size: 0.8vw;
            color: #ffffff;
            .marking-title {
              width: 4.5vw;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .cash-icon {
                width: 18px;
                height: 18px;
                border: 1px solid #12fcf6;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 0.1vh;
                .cash-icon-color {
                  width: 10px;
                  height: 10px;
                  background: #12fcf6;
                  border-radius: 50%;
                }
              }
              .rechargeable-icon {
                width: 18px;
                height: 18px;
                border: 1px solid #ff9600;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 0.1vh;
                .rechargeable-icon-color {
                  width: 10px;
                  height: 10px;
                  background: #ff9600;
                  border-radius: 50%;
                }
              }
              .eceivables-icon {
                width: 18px;
                height: 18px;
                border: 1px solid #22f225;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 0.1vh;
                .eceivables-icon-color {
                  width: 10px;
                  height: 10px;
                  background: #22f225;
                  border-radius: 50%;
                }
              }
              .code-back {
                width: 20px;
                height: 14px;
                background: linear-gradient(
                  to right,
                  #12fcf6 30%,
                  #edfffc 100%
                );
              }
              .rechargeable-back {
                width: 20px;
                height: 14px;
                background: linear-gradient(
                  to right,
                  #ff9600 30%,
                  #edfffc 100%
                );
              }
              .eceivables-back {
                width: 20px;
                height: 14px;
                background: linear-gradient(
                  to right,
                  #22f225 30%,
                  #edfffc 100%
                );
              }
            }
            .reserve-in {
              width: 5.5vw;
              height: 100%;
              display: flex;
              align-items: center;
              margin-left: 0.5vw;
              .hard-cash {
                font-size: 0.55vw;
                font-weight: 300;
                margin-left: 0.3vw;
                transform: translateY(0.2vh);
              }
            }
            .characters {
              color: #12fcf6;
              text-shadow: 0px 2px 4px rgba(4, 0, 0, 0.51);
            }
            .characte-rec {
              color: #ff9600;
              text-shadow: 0px 2px 4px rgba(4, 0, 0, 0.51);
            }
            .characte-reve {
              color: #22f225;
              text-shadow: 0px 2px 4px rgba(4, 0, 0, 0.51);
            }
          }
        }
      }
    }
  }

  .funding-plan {
    height: 35vh;
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5vh;

    .code-content {
      height: 30.5vh;
      width: 30vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background: #2098cc33;
      .inflow-situation {
        width: 100%;
        font-size: 0.7vw;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        padding: 0.9vh 0.5vw;
        .unit-flow {
          width: 6vw;
          background: #2098cc25;
          border: 1px solid #588ec35d;
          padding: 0.6vh 0;
          color: #fff !important;
        }
        .light-yellow {
          color: #ff9600 !important;
        }
        .inflow {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #2098cc25;
          border: 1px solid #588ec35d;
          padding: 0.6vh 0;
          color: #fff !important;
          margin-left: 0.5vw;
        }

        span {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 4vw;
          height: 100%;
        }
      }
      .item-quantity {
        font-weight: 500;
        background: #2098cc25;
        border: 1px solid #588ec35d;
        padding: 0.6vh 0;
        color: #fff !important;
      }
    }
  }
  .situation-name {
    width: 100%;
    height: 3.6vh;
    font-family: DreamHanSansCN, DreamHanSansCN;
    font-weight: 500;
    font-size: 1.1vw;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .text-til {
      width: 100%;
      transform: translateY(0.7vh);
      padding-left: 0.5vw;
    }
    .ckground-bar {
      height: 1.3vh;
      width: 100%;
      background: url("../assets/biao.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
}
</style>
